<template>
  <!-- 1:添加|修改spu -->
  <el-form :inline="false" label-width="100">
    <el-form-item label="SPU名称">
      <el-input placeholder="请输入SPU名称" clearable @change=""></el-input>
    </el-form-item>
    <el-form-item label="SPU品牌">
      <el-select
        value-key=""
        clearable
        filterable
        @change=""
        style="width: 250px"
      >
        <el-option
          v-for="item in 10"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="SPU描述">
      <el-input
        type="textarea"
        placeholder="请输入描述"
        clearable
        @change=""
      ></el-input>
    </el-form-item>
    <el-form-item label="SPU图片">
      <el-upload
        v-model:file-list="fileList"
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
      >
        <el-icon>
          <Plus />
        </el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
    </el-form-item>
    <el-form-item label="SPU销售属性">
      <!-- 展示销售属性的下拉菜单 -->
      <el-select
        value-key=""
        clearable
        filterable
        @change=""
        style="width: 250px"
      >
        <el-option
          v-for="item in 10"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
      <el-button
        type="primary"
        size="default"
        @click=""
        icon="Plus"
        style="margin-left: 10px"
      >
        添加属性值
      </el-button>
      <!-- table展示销售属性与属性值 -->
      <el-table border stripe style="margin: 10px 0">
        <el-table-column label="序号" type="index" width="80"></el-table-column>
        <el-table-column label="属性名" width="120"></el-table-column>
        <el-table-column label="属性值"></el-table-column>
        <el-table-column label="操作" width="120"></el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="default" @click="">保存</el-button>
      <el-button size="default" @click="handleCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
let emit = defineEmits(['changeScene'])

//子组件点击取消按钮，通知父组件切换场景
const handleCancel = () => {
  emit('changeScene', 0)
}
</script>

<style scoped></style>
